<template>
  <div style=" margin-left: 15%;border-radius: 5px; width: 98%;height: 900px;background: white;margin-top: 10px;">
    <div class="handle-box" style="margin-left: -30px; padding: 20px">
      <el-button class="modify" @click="handleInsert()"><Plus style="width: 1em; height: 1em; margin-right: 8px" />添加</el-button>
      <el-button class="modify" @click="handleDelete()"><Delete style="width: 1em; height: 1em; margin-right: 8px" /> 删除</el-button>
      <el-input style="margin-left: 8%" v-model="selectWord" size="medium" placeholder="电影类型/电影名" class="handle-input"></el-input>
      <el-button class="modify" @click="selectMovies">点击查询</el-button>
    </div>
    <el-table size="mini" style="margin-left: 12%; overflow: auto; margin-top: 5px; width: 96%; height: 720px" :data="data" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column label="电影图片" width="110" align="center">
        <template #default="scope">
          <div class="movie-img">
            <img :src="getUrl(scope.row.pic)" style="width: 100%" />
          </div>
          <el-upload
            :action="uploadUrl(scope.row.mid)"
            :before-upload="beforeAvatorUpload"
            :on-success="(res) => { return handleAvatorSuccess(res) }"
          >
            <el-button class="updatePhoto"><Picture style="width: 1em; height: 1em; margin-right: 5px" /> 更换图片</el-button>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column prop="mname" label="电影名" width="100" align="center"></el-table-column>
      <el-table-column prop="mtype" label="电影类型" width="100" align="center"></el-table-column>
      <el-table-column prop="director" label="导演" width="100" align="center"></el-table-column>
      <el-table-column prop="mrole" label="主演" width="100" align="center"></el-table-column>
      <el-table-column prop="duration" label="电影时长" width="100" align="center"></el-table-column>
      <el-table-column prop="mcount" label="票房" width="100" align="center"></el-table-column>
      <el-table-column label="语言" width="70" align="center">
        <template #default="scope">
          <el-tag type="danger">{{ scope.row.rate }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="语言" width="70" align="center">
        <template #default="scope">
          <el-tag type="danger" v-if="scope.row.mlanguage === '国语'">国语</el-tag>
          <el-tag v-else>外语</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80" align="center">
        <template #default="scope">
          <el-tag type="danger" v-if="scope.row.mstate === '正在热映'">正在热映</el-tag>
          <el-tag v-else>即将上映</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="电影简介">
        <template #default="scope">
          <p style="height: 100px; width: 200px; overflow: scroll">{{ scope.row.desn }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template #default="scope">
          <el-button class="modify1" @click="handleEdit(scope.row)"><Edit style="width: 1em; height: 1em; margin-right: 8px" /> 编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total,prev,pager,next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <AdminMoviesDialog :multipleSelection="multipleSelection" :editRow="editRow" :insertOrEdit="insertOrEdit" @getMoviesData="getMoviesData"></AdminMoviesDialog>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { useStore } from 'vuex'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import AdminMoviesDialog from '../../components/Admin/AdminMoviesDialog.vue'

const store = useStore()
const tableData = ref([])
const tempData = ref([])

function getMoviesData() {
  // 使用axios通信获得后端的订单数据
  axios
    .get('/api/movie/getMovieByIndex' + '/' + 2400 + '/' + 4000)
    .then((res) => {
      tableData.value = res.data
      tempData.value = res.data
    })
    .catch(() => {
      ElMessage.warning('获取电影信息失败！')
    })
}

function getUrl(url) {
  return require(`../../assets/moviesPic/${url}`)
}

// 上传头像 相关的三个函数
function handleAvatorSuccess() {
  getMoviesData()
  // 需用提示信息来代替
  ElMessage.success('上传电影图片成功')
}

// 更新图片
function uploadUrl(id) {
  // 需要改
  return '/api/movie/uploadImg/' + id
}

// 上传图片之前的校验
function beforeAvatorUpload(file) {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
  if (!isJPG) {
    ElMessage.warning('上传头像只能是jpg或png格式')
    return false
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    console.log('上传图片大小不能超过2M')
    return false
  }
  return true
}

const selectWord = ref('')
// 搜索电影
function selectMovies() {
  if (selectWord.value === '') {
    tableData.value = tempData.value
  } else {
    tableData.value = []
    for (const item of tempData.value) {
      if (item.mname.includes(selectWord.value) || item.mtype.includes(selectWord.value)) {
        tableData.value.push(item)
      }
    }
  }
}

const currentPage = ref(1)
function handleCurrentChange(val) {
  currentPage.value = val
}

const pageSize = ref(5)

const data = computed(() => {
  return tableData.value.slice((currentPage.value - 1) * pageSize.value)
})

// 多选
const multipleSelection = ref('')
function handleSelectionChange(val) {
  multipleSelection.value = val
}

// 用来判断当前执行的是增添场次 还是编辑场次 1-增加  0-编辑  传给子组件 用于复用判断
const insertOrEdit = ref(1)
// 当前被编辑的行信息
const editRow = ref('')

// 打开EditDialog 并把当前行的值传进子组件
function handleEdit(row) {
  insertOrEdit.value = 0
  editRow.value = row
  store.commit('setEditDialogVisible', true)
}

// 打开addDialog
function handleInsert() {
  insertOrEdit.value = 1
  store.commit('setEditDialogVisible', true)
}

// 打开delDialog
function handleDelete() {
  store.commit('setDelDialogVisible', true)
}

onMounted(() => {
  getMoviesData()
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/AdminPhone/phoneAdminMovies.scss';
</style>
